<template>
  <div class="layer" v-if="show" @touchmove.stop="preventD">
    <div class="dialog">
      <div class="dialog-container" :style="bg">
        <div class="qiandao-form" v-if="showMain">
          <div class="title">签到</div>
          <div class="intro"><hr/><p>你已连续签到<span>{{seriateTime}}</span>天</p><hr/></div>
          <div class="tips">连续签到鲜花加倍，更能获得稀有饰品</div>
          <div class="list">
            <div class="list-item"
              v-for="(item, i) in currentWeek" :key="i"
              :class="{ todo: item.isToday && !item.isSign, forget: item.isOldDay && !item.isSign }"
              @click="onQiandaoListClick(item.isToday)">
              <span>{{item.text}}</span>
              <i :style="qiandaoCheck" v-if="item.isSign"></i>
            </div>
          </div>
          <div class="rule" @click="onRuleClick">签到规则</div>
        </div>
        <div class="qiandao-result" v-if="showSignSuccess">
          <p>签到成功!<br/>恭喜您获得了{{flower}}朵鲜花!</p>
          <i :style="qiandaoFlower"></i>
        </div>
        <div v-if="showRule" class="qiandao-rule" :style="qiandaoRuleBg"></div>
      </div>
      <icon type="cancel" size="30" color="#fff" @click="hideDialog"/>
    </div>
  </div>
</template>

<script>
import MButtton from 'comp/m-button'
import { sourceDomain } from '@/utils/constant'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MButtton
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    seriateTime: String,
    signRecordList: {
      type: Object,
      default: {}
    },
  },
  data () {
    return {
      icons: {
        bg: `${sourceDomain}/qiandao-bg.png?v=1.3`,
        qiandaoCheck: `${require('static/images/index/qiandao-check.png')}`,
        qiandaoFlower: `${require('static/images/index/qiandao-flower.png')}`,
        qiandaoRule: `${sourceDomain}/qiandao-rule.png?v=1.3`,
      },
      currentWeek: [],
      showMain: true,
      showSignSuccess: false,
      showRule: false,
      flower: 0
    }
  },
  computed: {
    bg () {
      return `background-image: url(${this.icons.bg});`
    },
    qiandaoCheck () {
      return `background-image: url(${this.icons.qiandaoCheck});`
    },
    qiandaoFlower () {
      return `background-image: url(${this.icons.qiandaoFlower});`
    },
    qiandaoRuleBg () {
      return `background-image: url(${this.icons.qiandaoRule});`
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.$emit('onShow')
        this.showMain = true
        this.showSignSuccess = false
        this.showRule = false
      } else {
        this.$emit('onHide')
      }
    },
    signRecordList: {
      handler () {
        this.getCurrentWeek()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    preventD () {},
    hideDialog () {
      if (this.showRule) {
        this.showRule = false
        this.showMain = true
      } else {
        this.$emit('update:show', false)
      }
    },
    onClick () {
      this.$emit('onClick')
      this.hideDialog()
    },
    getCurrentWeek () {
      const now = new Date()
      const startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay())
      const date = startDate.getDate() // 一周第一天（周日）
      let arr = []
      if (now.getDate() === date) { // 今天刚好是周日，则要取上一周
        for (let i = 6; i >= 0; i--) { // 今天周日，要取过去6天+今天作为一周
          const d = new Date(startDate.getTime() - i * 86400000)
          const md = `${this.checkTime(d.getMonth() + 1)}.${this.checkTime(d.getDate())}`
          const ymd = `${this.checkTime(d.getFullYear())}${this.checkTime(d.getMonth() + 1)}${this.checkTime(d.getDate())}`
          const isToday = d.getDate() === now.getDate()
          const isOldDay = d.getDate() < now.getDate() && d.getMonth() === now.getMonth()
          if (this.signRecordList[ymd]) {
            arr = arr.concat({
              text: md,
              isSign: true,
              isToday,
              isOldDay
            })
          } else {
            arr = arr.concat({
              text: md,
              isSign: false,
              isToday,
              isOldDay
            })
          }
        }
      } else {
        for (let i = 1; i < 8; i++) { // 第一天为周一，不是周日
          const d = new Date(startDate.getTime() + i * 86400000)
          const md = `${this.checkTime(d.getMonth() + 1)}.${this.checkTime(d.getDate())}`
          const ymd = `${this.checkTime(d.getFullYear())}${this.checkTime(d.getMonth() + 1)}${this.checkTime(d.getDate())}`
          const isToday = d.getDate() === now.getDate()
          const isOldDay = d.getDate() < now.getDate() && d.getMonth() === now.getMonth()
          if (this.signRecordList[ymd]) {
            arr = arr.concat({
              text: md,
              isSign: true,
              isToday,
              isOldDay
            })
          } else {
            arr = arr.concat({
              text: md,
              isSign: false,
              isToday,
              isOldDay
            })
          }
        }
      }
      this.currentWeek = arr
    },
    async onQiandaoListClick (isToday) {
      if (isToday) {
        const ret = await this.$store.dispatch('doSign')
        if (ret.data) {
          this.showMain = false
          this.showSignSuccess = true
          this.flower = ret.data.flowers
        }
      }
    },
    onRuleClick () {
      this.showRule = true
      this.showMain = false
    }
  }
}
</script>

<style lang="less" scoped>
.layer {
  z-index: 200;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .5);
  .dialog {
    width: 100%;
    text-align: center;
    &-container {
      width: 715rpx;
      height: 755rpx;
      margin: 0 auto;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .qiandao-form {
      padding-top: 125rpx;
      .title {
        font-size: 44rpx;
        color: #ff2e8b;
        font-weight: bold;
      }
      .tips {
        font-size: 25rpx;
        color: #ff2e8b;
        line-height: 35rpx;
      }
      .intro {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #ff2e8b;
        p {
          padding: 0 6rpx;
        }
        span {
          color: #2f1c07;
        }
        hr {
          width: 60rpx;
          height: 3rpx;
          background-color: #ff2e8b;
        }
      }
      .list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 351rpx;
        margin: 0 auto;
        padding-top: 20rpx;
        &-item {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 99rpx;
          height: 99rpx;
          font-size: 34rpx;
          color: #ff2e8b;
          font-weight: bold;
          border: 3rpx solid #ff2e8b;
          border-radius: 8rpx;
          margin-right: 18rpx;
          margin-bottom: 12rpx;
          &:nth-child(3n), &:last-child {
            margin-right: 0;
          }
          i {
            position: absolute;
            bottom: 5rpx;
            left: 50%;
            margin-left: -17rpx;
            display: block;
            width: 35rpx;
            height: 30rpx;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
          }
          &.forget {
            background-color: rgba(0, 0, 0, .52);
            color: #9d3965;
          }
          &.todo {
            box-shadow: #ff2e8b 0rpx 0rpx 7rpx 5rpx;
          }
        }
      }
      .rule {
        width: 170rpx;
        height: 45rpx;
        line-height: 45rpx;
        text-align: center;
        font-size: 30rpx;
        background-color: #ff2e8b;
        color: #f6e2d7;
        border-radius: 8rpx;
        margin: 6rpx auto 0;
      }
    }
    .qiandao-result {
      padding-top: 254rpx;
      p {
        font-size: 42rpx;
        color: #ff2e8b;
        line-height: 58rpx;
        text-align: center;
        font-weight: bold;
      }
      i {
        display: block;
        width: 203rpx;
        height: 90rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        margin: 30rpx auto 0;
      }
    }
    .qiandao-rule {
      width: 715rpx;
      height: 755rpx;
      margin: 0 auto;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
}
</style>
